<template>
  <p-modal
    title="原因分析及长期措施"
    :width="width"
    centered
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'yyjcqcs'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        style="display:flex;flex-wrap: wrap;"
      >
      <div style="width: 100%;display:flex;">
        <p-form-model-item label="故障原因大类" prop="gzyydl">
          <p-select
            show-search
            style="width: 120px;"
            v-model="form.gzyydl"
            placeholder="请选择"
          >
            <p-select-option v-for="item in gzyyList" :key="item.value">
              {{ item.label }}
            </p-select-option>
          </p-select>
        </p-form-model-item>
        <p-form-model-item label="故障原因小类" prop="gzyyxl">
          <p-select
            style="width: 120px;"
            show-search
            v-model="form.gzyyxl"
            placeholder="请选择"
          >
            <p-select-option v-for="item in gzyyList" :key="item.value">
              {{ item.label }}
            </p-select-option>
          </p-select>
        </p-form-model-item>
      </div>
      <p-form-model-item style="width: 100%;" label="原因分析" prop="yyfx">
        <p-input
          style="width: 100%;"
          v-model="form.yyfx"
          placeholder="请选择"
        >
        </p-input>
      </p-form-model-item>
      <h4 class="hTitle" style="width: 100%;margin-top:20px;">更新物料信息</h4>
      </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import _ from "lodash";
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "yyjcqcs",
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      handle: '',
      width: 800,
      visible: false,
      confirmLoading: false,
      gzyyList: [
        {
          value: 1,
          label: '一般',
        },
        {
          value: 2,
          label: '重要',
        },
        {
          value: 3,
          label: '致命',
        },
      ],
      ycdjList: [
        {
          value: 1,
          label: '一般',
        },
        {
          value: 2,
          label: '重要',
        },
        {
          value: 3,
          label: '致命',
        },
      ],
      form: {
        yyfx: '', 
        gzyydl: '', 
        gzyyxl: '', 
      },
      rules: {
        yyfx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        gzyydl: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        gzyyxl: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initValue();
  },
  methods: {
    /* validateQuantity(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输入内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      } 
    }, */
    initValue() {
      this.visible = this.value
    },
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .yyjcqcs {
    .poros-form .poros-form-item{
      display: flex;
    }
    .poros-form{
      color: rgba(0, 0, 0, 0.85);
    }
    .poros-modal-body{
      max-height: 770px;
      overflow: auto;
    }
    .poros-form-item-label{
      width: 146px;
    }
    .poros-form-item .poros-form-item-control-wrapper{
      overflow: hidden;
    }
    .gt-info-list-item{
      .label{
        text-align: right;
      }
    }
    .formLeft{
      width: 50%;
    }
    .formRight{
      width: 50%;
    }
    .w50{
      width: 50%;
    }
  }
</style>

